<template>
  <uni-swiper-dot
    class="uni-swiper-dot-box"
    :info="imgList"
    :current="current"
    mode="round"
    :dots-styles="dotsStyles"
  >
    <swiper class="swiper-box" @change="change">
      <swiper-item v-for="(item, index) in imgList" :key="index">
        <view class="swiper-item" @tap="previewImage">
          <image mode="scaleToFill" :src="item.url" />
        </view>
      </swiper-item>
    </swiper>
  </uni-swiper-dot>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { imageType } from "@/types/vote";

const props = defineProps<{
  imgList: imageType[];
}>();

//当前下标
const current = ref(0);
//轮播图dots样式
const dotsStyles = ref({
  backgroundColor: "rgba(0, 0, 0, .3)",
  border: "1px rgba(0, 0, 0, .3) solid",
  color: "#fff",
  selectedBackgroundColor: "rgba(0, 0, 0, .9)",
  selectedBorder: "1px rgba(0, 0, 0, .9) solid",
});

//轮播图切换
const change: UniHelper.SwiperOnChange = (e) => {
  current.value = e.detail.current;
};

//预览图片
const previewImage = () => {
  const imageUrls = props.imgList.map((item) => item.url);
  uni.previewImage({
    current: current.value,
    urls: imageUrls,
  });
};
</script>
<style scoped lang="scss">
.swiper-box {
  height: 200px;
  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    background-color: #000;
  }
}
</style>
